<template>
  <div>
    <div id="echart2" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { onMounted, onUnmounted, ref, reactive } from 'vue';
  import { getDoubleChart } from '/@/api/tb/tbChart'
  const data = reactive({
    titleList: [],
    oneList: [],
    twoList: [],
    // otherList: [14, 16, 26, 27, 0, 2, 5],
  });
  onMounted(async() => {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById('echart2')!;
    var myChart = echarts.init(chartDom, 'light');
    var option: EChartsOption;
    const Double = reactive({
      orderNum: {},
      orderSale: {}
    })
    Double.orderNum = JSON.parse(JSON.stringify(await getDoubleChart())).data.orderNum
    Double.orderSale = JSON.parse(JSON.stringify(await getDoubleChart())).data.orderSale
   for(let i in Double.orderNum){
    data.titleList.push(i)
    data.oneList.push(Double.orderNum[i])
   }
   for(let i in Double.orderSale){
    data.twoList.push(Double.orderSale[i])
   }
    const getdata = (data) => {
      // 基于准备好的dom，初始化echarts实例

      option = {
        title: {
          text:"部门对比总览",
          textStyle:{
            color:"black",
            fontSize: 24,
          },
          left: 'center'
         },
        //  backgroundColor: '#00265f',
        //展示右上角的标签显示，series中的name需与这边一致，否则不进行展示
        legend: {
          data: ['已完成订单', '有售后的订单'],
          type: 'plain',
          right: '2%', //展示位置，具体可查看api
          textStyle: {
            color: '#000', //文字颜色
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
        },
        grid: {
          // left: '0%',
          // // top: '10px',
          // right: '0%',
          // bottom: '4%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: data.titleList,
            // data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
                width: 1,
                type: 'solid',
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: '#000',
                fontSize: '12',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: '#000',
                fontSize: '12',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
                width: 1,
                type: 'solid',
              },
            },
            splitLine: {
              lineStyle: {
                color: 'gold',
              },
            },
          },
        ],
        series: [
          {
            type: 'bar',
            name: '已完成订单',
            data: data.oneList,
            // data: [1500, 1200, 600, 200, 300, 300, 900],
            barWidth: '35%', //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: '#2f89cf', //柱子颜色
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
          {
            type: 'bar',
            name: '有售后的订单',
            data: data.twoList,
            // data: [1500, 1200, 600, 200, 300, 300, 900],
            barWidth: '35%', //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: '#27d08a', //柱子颜色
                opacity: 1,
                barBorderRadius: 5, //柱子菱角
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    };
    getdata(data);
    window.addEventListener('resize', function () {
        myChart.resize();
      });
  });
  onUnmounted(() => {
    echarts.dispose;
  });
</script>

<style scoped>
  :global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
  }

  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
  }

  .statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
  }

  .statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
  }

  .green {
    color: var(--el-color-success);
  }
  .red {
    color: var(--el-color-error);
  }
</style>
